<template>
    <div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <li v-for="item in list" :key="item.id">
                <router-link :to="{path:'/wgj/detail',query:{id:item.id}}">
                    <img class="chi_img" :src="item.coverPhoto" alt="">
                    <h1>{{item.name}}
                        <p class="p1">{{item.homePageIntroduction}}</p>
                        <p class="p2"><img src="@/assets/sfj/images/eye.png" alt=""><span>{{item.consume}}</span>次</p>
                    </h1>
                </router-link>
            </li>
        </van-list>
    </div>
</template>

<script>
    import home from '@/api/travel/home';
    import Vue from 'vue'
    import {List} from 'vant';


    Vue.use(List);

    export default {
        id: "",
        name: "image-child-table-list",
        data() {
            return {
                list: [],
                page: 1,
                pageAll: 0,
                loading: false,
                finished: false,
                noData: false, // 如果没有数据，显示暂无数据
            };
        },
        methods: {
            getPlayList() {
                home.getListByType(this.page, this.$parent.limit, this.$parent.type)
                    .then(response => {
                        this.page++;
                        this.pageAll = Math.ceil(response.data.count / this.$parent.limit);
                        this.list = this.list.concat(response.data.data);

                        // 如果没有数据，显示暂无数据
                        if (this.list.length === 0 && this.page === 1) {
                            this.finished = true
                        }
                        // 如果加载完毕，显示没有更多了
                        if (response.data.data.length === 0) {
                            this.finished = true
                        }

                        // 加载状态结束
                        this.loading = false;

                        // 数据全部加载完成
                        if (this.page > this.pageAll) {
                            this.finished = true;
                        }
                    });
            },
            onLoad:
                function () {
                    // 异步更新数据
                    // setTimeout 仅做示例，真实场景中一般为 ajax 请求

                    this.getPlayList();

                    // }, 1000);
                }
            ,
        },
        props: ['limit', 'type']
    }
</script>

<style>
    body {
        background-color: #f5f5f5;
    }
</style>
